<template>
	<gui-page :customHeader="true" :headerClass="['hulu-bg-color8']" ref="guiPage" :fullPage="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :home="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view style="width:60rpx;"></view>
				<text class="gui-flex1 gui-text-center gui-ellipsis">写评价</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template v-slot:gBody>
			<view class="hulu-bg-color8 gui-text-center hulu-font-3 "
				style="height:104rpx;font-weight: bold;line-height: 104rpx;">
				XX医院餐厅
			</view>
			<view class="hulu-bg-color8" style="height:40rpx;">

			</view>

			<view class="gui-bg-white"
				style="height:1200rpx;border-top-right-radius: 40rpx;border-top-left-radius: 40rpx;margin-top:-40rpx;box-sizing: border-box;padding:30rpx;">
				<view class="comment-head">
					<view class="hulu-text-color2 hulu-font-3" style="font-weight: bold;">
						您对此次用餐满意吗？
					</view>
				</view>
				<view class="comment-label" style="margin-top:24rpx">
					<view class="label-time hulu-text-color2 hulu-font-4" style="font-weight: bold;">
						2024-10-28
					</view>
				</view>
				<view class="comment-content" style="margin-top:28rpx;display: flex;">
					<view class="content-img">
						<image src="../../static/assets/dish.png" mode="widthFix"
							style="border-radius: 24rpx;width:144rpx;height:144rpx;"></image>
					</view>
					<view class="content-txt"
						style="font-weight: lighter;margin-left:24rpx;display: flex;justify-content: space-evenly;flex-direction: column;align-items: flex-start;">
						<view class="hulu-font-4 gui-flex">
							辣椒炒肉
						</view>
						<view class="hulu-font-4 gui-flex">
							菜品 <u-rate v-model="good"></u-rate>
						</view>
						<view class="hulu-font-4 gui-flex">
							配送 <u-rate v-model="deliver"></u-rate>
						</view>
					</view>

				</view>
				<view class="comment-input" style="margin-top:100rpx;">
					<view class="hulu-font-4 hulu-text-color2" style="line-height: 44rpx;">
						评论
					</view>
					<textarea style="background-color: #F4F4F4;
					 border-radius:12rpx;padding: 30rpx;
					 width:690rpx;box-sizing: border-box;
					 height:320rpx;font-size: 28rpx;" placeholder-style="font-weight:lighter" placeholder="简单讲述你的体验,这对我们将是特别大的帮助" />
				</view>
				<view class="comment-upload" style="margin-top:24rpx;">
					<view class="hulu-font-4 hulu-text-color2" style="line-height: 44rpx;">
						图片
					</view>
					<u-upload name="3" multiple :maxCount="10" :previewFullImage="true"></u-upload>
				</view>
			</view>

			<view class="pay-btn">
				<view class="pay-btn-warp">
					<up-button  type="primary" color="linear-gradient(45deg,#A57B3F,#D6B27D)"
						shape="circle" text="立即发表">
					</up-button>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import graceJS from '@/Grace6/js/grace.js';
	import cateChangeData from '@/Grace6/demoData/cateChange.js';
	import useDish from "@/api/dish"
	const {
		getDish,
		dish,
		carousel_images
	} = useDish()
	export default {
		data() {
			return {
				star: 3.5,
				good: 5,
				deliver: 4.5,
				dish: dish,
				currentIndex: 0,
				swipers: [],
				navItems: [{
						id: 0,
						name: "详情",
					},
					{
						id: 1,
						name: "评价",
					},
				],
				carousel_images: carousel_images
			}
		},
		async created() {
			await getDish(1)
		},
		onLoad: function() {
			// 获取页面主体高度从而得出主体高度
			graceJS.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 02. 导航的高度
					// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
					this.mainHeight = e.height - uni.upx2px(110);
					setTimeout(() => {
						this.pageLoading = false;
					}, 1000)
				});
			});
		},
		methods: {
			swiperChange(e) {
				var index = e.detail.current;
				this.currentIndex = index;
			},
			navChange: function(index) {
				this.currentIndex = index
			},
		}
	}
</script>

<style lang="scss">
.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}
</style>